<template>
	<div class="handle-wrapper">
		<van-nav-bar title="事件单办理" left-text="返回" left-arrow @click-left="onClickLeft" />
		<!-- <van-pull-refresh class="content" v-model="loading" @refresh="onRefresh"> -->
		<div class="content">
			<div class="detail">
				<div class="title">{{ eventDetail.eventTitle }}</div>
				<div class="code">事件单编码：{{ eventDetail.eventNum }}</div>
				<div class="code">上报人名称：{{ eventDetail.creator }}</div>
				<div class="code active">
					<van-text-ellipsis rows="3" :content="eventDetail.eventContent" />
				</div>
				<van-tag class="status" size="medium" :type="statusType[eventDetail.orderState]">{{ statusConfig[eventDetail.orderState] }}</van-tag>
				<div class="button" @click="handleDetail">详情<van-icon name="arrow-double-right" /></div>
			</div>
			<div class="form">
				<div class="title">{{ businessItemName || '--' }}</div>
				<div class="form-content">
					<v-form-render ref="formRef" :form-json="formJson" :mixMode="true" v-if="!formLoading"></v-form-render>
				</div>
			</div>
		</div>
		<!-- </van-pull-refresh> -->
		<div class="operate">
			<van-button type="default" size="small" @click="onClickLeft" :loading="btnLoding">取 消</van-button>
			<van-button type="primary" size="small" @click="handleProcess" :loading="btnLoding">办 理</van-button>
		</div>
	</div>
</template>
<script setup lang="ts">
import { getAllJson } from '/@/utils/transform';
import { handleEvent, getHandleForm, getDetail } from '/@/api/myTodo/index';

const route = useRoute();
const router = useRouter();
const onClickLeft = () => {
	router.go(-1);
};

// 初始化数据
const init = async () => {
	showLoadingToast({
		message: '加载中...',
		forbidClick: true,
		duration: 0,
	});
	try {
		await getEventDetail();
		await getOutputInfo();
		closeToast();
	} catch {
		closeToast();
	}
};

// const loading = ref(false);
// const onRefresh = () => {
// 	try {
// 		init();
// 		loading.value = false;
// 	} catch (error) {
// 		loading.value = false;
// 	}
// };

// 获取事件单详情
const statusConfig = ref<any>({
	0: '待发起',
	1: '未办结',
	2: '已办结',
});
const statusType = ref<any>({
	0: 'warning',
	1: 'success',
	2: 'primary',
});
const eventDetail = ref<any>({});
const getEventDetail = async () => {
	if (route.query.id) {
		const res = await getDetail(route.query.id);
		eventDetail.value = res.data;
	}
};

// 获取办理表单
const formLoading = ref(true);
const formRef = ref();
const outputListVO = ref([]);
const formJson = ref();
const bizTaskCode = ref();
const businessItemName = ref();
const getOutputInfo = async () => {
	const params = {
		busCode: route.query.taskCode,
		eventNum: route.query.eventNum,
		eventProcessId: route.query.eventProcessId,
	};
	const res = await getHandleForm(params);
	if (res.data) {
		businessItemName.value = res.data.businessItemName;
		outputListVO.value = res.data.outputListVO;
		formJson.value = getAllJson(res.data.outputListVO);
		bizTaskCode.value = res.data.businessItemCode;
	}
	formLoading.value = false;
	let fromData: any = {};
	res.data.outputListVO.forEach((item: any) => {
		if (item.fieldValue && item.fieldEnglish !== 'attachment') {
			fromData[item.fieldEnglish] = item.fieldValue;
		}
	});
	nextTick(() => {
		if (formRef.value) {
			formRef.value.setFormData(fromData);
		}
	});
};
// 办理
const btnLoding = ref(false);
const handleProcess = async () => {
	await formRef.value
		.getFormData()
		.then(async (formData: any) => {
			const bizOutputData = JSON.parse(JSON.stringify(formData));
			// 处理附件
			if (bizOutputData.attachment) {
				bizOutputData.attachment.forEach((item: any) => {
					if (!item.uploadFileId) {
						item.uploadFileId = item.id;
					}
					delete item.uid;
					delete item.status;
				});
			}
			// 处理枚举
			outputListVO.value.forEach((item: any) => {
				if (item.fieldType === 2) {
					const filedValue = bizOutputData[item.fieldEnglish];
					const optionList = item.pendingSelectionInformationList;
					if (optionList && optionList.length > 0) {
						if (item.isMultiSelect && filedValue && filedValue.length > 0) {
							const value: any = [];
							optionList.forEach((i: any) => {
								if (filedValue.includes(i.optionKey)) {
									value.push({
										optionDescription: i.optionDescription,
										optionKey: i.optionKey,
									});
								}
							});
							bizOutputData[item.fieldEnglish] = value;
						} else if (!item.isMultiSelect && filedValue !== '') {
							optionList.forEach((i: any) => {
								if (filedValue === i.optionKey) {
									bizOutputData[item.fieldEnglish] = {
										optionDescription: i.optionDescription,
										optionKey: i.optionKey,
									};
								}
							});
						}
					}
				}
			});
			const params = {
				eventProcessId: route.query.eventProcessId,
				eventNum: route.query.eventNum,
				bizTaskCode: bizTaskCode.value,
				bizOutputData: bizOutputData,
			};

			btnLoding.value = true;
			try {
				const res: any = await handleEvent(params);
				if (res.ok) {
					showSuccessToast('办理成功');
					onClickLeft();
				} else {
					showFailToast(res.msg);
				}
			} finally {
				btnLoding.value = false;
			}
		})
		.catch(() => {
			showToast('请正确填写信息');
		});
};

// 获取事件单详情
const handleDetail = () => {
	router.push({
		path: '/detail',
		query: {
			id: route.query.id,
			eventNum: route.query.eventNum,
		},
	});
};

onMounted(() => {
	init();
});
</script>
<style lang="scss" scoped>
.handle-wrapper {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #fff;

	.content {
		box-sizing: border-box;
		width: 100%;
		height: calc(100% - 46px - 46px);
		padding: 10px;
		overflow-y: auto;

		.detail {
			position: relative;
			box-sizing: border-box;
			width: 100%;
			padding: 10px;
			margin-bottom: 10px;
			border-radius: 10px;
			box-shadow: 0 3px 8px 0 #00000029;

			.title {
				width: calc(100% - 50px);
				margin-bottom: 10px;
				font-size: 16px;
				font-weight: 700;
				color: #303133;
			}

			.code {
				margin-bottom: 5px;
				font-size: 14px;
				font-weight: 400;
				color: #505050;

				&.active {
					width: calc(100% - 50px);
				}
			}

			.status {
				position: absolute;
				top: 10px;
				right: 10px;
			}

			.button {
				position: absolute;
				right: 10px;
				bottom: 15px;
				color: #1989fa;
				cursor: pointer;
			}
		}

		.form {
			width: 100%;
			margin-bottom: 20px;
			border-radius: 10px;
			box-shadow: 0 3px 8px 0 #00000029;

			:deep(.el-form-item__label) {
				height: auto !important;
				margin-top: 10px;
				line-height: 24px !important;
				word-break: break-all;
				white-space: wrap;
			}

			:deep(.el-form-item__content) {
				margin-bottom: 10px;
			}

			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 40px;
				font-size: 16px;
				font-weight: 700;
				color: #303133;
				border-bottom: 1px solid #e7eaf1;
			}

			&-content {
				box-sizing: border-box;
				width: 100%;
				padding: 10px;
				overflow: hidden;
			}
		}
	}

	.operate {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 46px;
		background-color: #fff;
		border-top: 1px solid #ebedf08a;

		.van-button {
			width: 100px;

			&:first-child {
				margin-right: 20px;
			}
		}
	}
}

:deep(.van-popup) {
	.tab-item-li {
		height: auto !important;
		line-height: 30px !important;
		// text-align: center;
		white-space: pre-wrap !important;
	}
}
</style>
